<template>
  <div>
    <u-navbar title="新增发票" :placeholder="true" :autoBack="true"></u-navbar>
    <!-- 发票类型 -->
    <view class="type">
      <view class="left">发票类型</view>
      <view class="right">
        <u-radio-group
          v-model="radiovalue1"
          placement="column"
          @change="groupChange"
          class="radio-group"
        >
          <u-radio
            :customStyle="{ marginBottom: '8px' }"
            v-for="(item, index) in radiolist1"
            :key="index"
            :label="item.name"
            :name="item.name"
            class="radio"
          >
          </u-radio>
        </u-radio-group>
      </view>
    </view>
    <u--form labelPosition="left" class="form">
      <u-form-item labelWidth="140rpx" label="发票抬头" class="item">
        <u--input
          v-model="title"
          border="none"
          placeholder="输入发票抬头"
        ></u--input>
      </u-form-item>
    </u--form>
    <!-- 默认 -->
    <view class="acquiesce">
      <view class="left">设为默认</view>
      <view class="right"
        ><u-switch
          v-model="acquiesce"
          asyncChange
          @change="asyncChange"
        ></u-switch
      ></view>
    </view>
    <!-- 提交 -->
    <view class="submit" @click="submit">提交</view>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
const acquiesce = ref(false);
const type = ref("公司");
const title = ref("");

const asyncChange = (e) => {
  uni.showModal({
    content: e ? "确定要打开吗" : "确定要关闭吗",
    success: (res) => {
      if (res.confirm) {
        acquiesce.value = e;
      }
    },
  });
};
const submit = () => {
  if(title.value){
    console.log('发票抬头:' + title.value);
    console.log('发票类型:' + type.value);
    uni.showToast({
      title: "提交成功",
      icon: "success",
    });
  }else{
    uni.showToast({
      title: "提交失败",
      icon: "error",
    });
  }
};

//单选列表
const radiolist1 = reactive([
  {
    name: "公司",
    disabled: false,
  },
  {
    name: "个人",
    disabled: false,
  },
]);
const radiovalue1 = ref("公司");

const groupChange = (n) => {
  type.value = n;
};

//抬头
</script>

<style lang="scss" scoped>
.type {
  margin-top: 20rpx;
  display: flex;
  flex-direction: row !important;
  justify-content: left;
  align-items: center;
  background-color: #fff;
  padding: 40rpx 20rpx;
  border-bottom: 1px solid #eee;
  .left {
    font-size: 15px;
    margin-right: 20rpx;
  }
  .radio-group {
    display: flex !important;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    .radio {
      margin: 0 10rpx !important;
    }
  }
}
.acquiesce {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 30rpx 20rpx;
  font-size: 15px;
  margin-top: 20rpx;
}
.submit {
  background-color: #f9436a;
  width: calc(100% - 40rpx);
  height: 80rpx;
  line-height: 80rpx;
  color: #fff;
  text-align: center;
  border-radius: 10rpx;
  margin: auto;
  margin-top: 60rpx;
}
.form {
  background-color: #fff;
  padding: 20rpx;
}
</style>
